<template>
    <div>
        <userDialog :dialogTitle="dialogTitle" :centerDialogVisible="visible" @updateVisible="updateVisible"
            :footer="false" @resetPopupData="resetPopupData" @submitPopupData="submitPopupData" :popupWidth="'90%'"
            :popupTop="'20vh'">
            <div>
                <div class="steps_container">
                    <el-steps :active="activeStep">
                        <el-step title="选择需要发布的店铺"></el-step>
                        <el-step title="店铺数据设置"></el-step>
                        <el-step title="商品参数设置"></el-step>
                        <el-step title="特殊参数设置"></el-step>
                        <el-step title="SKU参数设置"></el-step>
                        <el-step title="标题设置"></el-step>
                        <el-step title="开始发布"></el-step>
                    </el-steps>
                    <div class="steps_active">
                        <!-- 动态组件，根据当前步骤显示不同的内容 -->
                        <!-- <component :is="currentComponent" :releaseItem="releaseItem" refs="ref1"></component> -->
                        <step1 ref="step1" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 1" />
                        <step2 ref="step2" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 2" />
                        <step3 ref="step3" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 3" />
                        <step4 ref="step4" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 4" />
                        <step5 ref="step5" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 5" />
                        <step6 ref="step6" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 6" />
                        <step7 ref="step7" :releaseItem="releaseItem" :releaseInfo="formData" @send="getChildData"
                            v-if="activeStep + 1 == 7" />
                    </div>
                    <!-- 操作按钮 -->
                    <div class="steps-action">
                        <el-button v-if="activeStep > 0" @click="prev">上一步</el-button>
                        <el-button v-if="activeStep + 1 < steps.length" type="primary"
                            class="next-buuton next-button-green next-buuton-primary" @click="next">下一步</el-button>
                        <el-button v-if="activeStep === steps.length - 1" type="success"
                            @click="submitPopupData">发布</el-button>
                    </div>
                </div>
            </div>
            <template #footer>
                <div></div>
            </template>

        </userDialog>
    </div>
</template>

<script>
import { releaseGoods } from "@/api/product/productInfo";

import userDialog from '@/components/Dialog'
import step1 from './step1.vue';
import step2 from './step2.vue';
import step3 from './step3.vue';
import step4 from './step4.vue';
import step5 from './step5.vue';
import step6 from './step6.vue';
import step7 from './step7.vue';
export default {
    components: {
        userDialog,
        step1,
        step2,
        step3,
        step4,
        step5,
        step6,
        step7,
    },
    props: {
        releaseItem: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            activeStep: 0,
            steps: [step1, step2, step3, step4, step5, step6, step7],
            dialogTitle: '',
            visible: true,
            formData: {},

        }
    },
    computed: {
        currentComponent() {
            // 返回当前步骤对应的组件
            return this.steps[this.activeStep];
        }
    },
    methods: {
        updateVisible(visible) {
            this.visible = visible
            this.$emit('close')
        },
        // 组装子组件数据
        getChildData(childData) {
            this.formData = Object.assign(this.formData, childData)
            if (this.formData.common2) {
                this.formData.common = Object.assign(this.formData.common, this.formData.common2)
                delete this.formData.common2
            }
            console.log('child', this.formData);
        },
        resetPopupData() {

        },
        submitPopupData() {
            releaseGoods(this.formData).then(res => {
                 this.$message.success("发布成功,");
                 this.$confirm('是否跳转到发布详情?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/dataDeploy/record')
                })
            })
        },
        next() {
            // console.log('this.', this.$refs[`step${this.activeStep + 1}`]);
            console.log('this.', this.$refs['step1']);
            const isNext = this.$refs[`step${this.activeStep + 1}`].handleEmitData()
            console.log('isNext', isNext);
            if(!isNext) {
                return
            }
            console.log('isNext', isNext);
            if (this.activeStep < this.steps.length - 1) {
                this.activeStep++;
            }
        },
        prev() {
            if (this.activeStep > 0) {
                this.activeStep--;
            }
        },


    }
}
</script>

<style lang="scss" scope>
.steps_container {
    width: 90%;
    margin: 0 auto;

    .steps-action {
        margin-top: 20px;
        text-align: center;
    }

    .steps_active {
        border: 1px solid #ccc;
        margin-top: 40px;
        padding: 20px;
    }
}
</style>